<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
  // @ts-ignore
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    title: {
    text: '堆叠线'
  },
  tooltip: {
    trigger: 'axis'
  },

  legend: {
    data: ['X线影像', '超声影像', 'CT影像', '核磁共振影像', 'PET影像']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'X线影像',
      type: 'line',
      stack: 'Total',
      data: [120, 120, 120, 120, 120, 120, 120,120, 120, 120, 120, 120, 120, 120]
    },

    {
      name: '超声影像',
      type: 'line',
      stack: 'Total',
      data:[119, 136, 99, 133, 87, 232, 212, 218, 185, 195, 235, 296, 328, 314]
    },
    {
      name: 'CT影像',
      type: 'line',
      stack: 'Total',
      data: [121, 131, 103, 135, 92, 228, 209, 221, 180, 190, 233, 293, 329, 307]
    },
    {
      name: '核磁共振影像',
      type: 'line',
      stack: 'Total',
      data: [125, 127, 102, 136, 94, 231, 208, 223, 183, 192, 234, 294, 331, 313]
    },
    {
      name: 'PET影像',
      type: 'line',
      stack: 'Total',
      data: [122, 129, 108, 130, 93, 225, 205, 220, 180, 195, 236, 291, 332, 308]
    }
  ]
  });
}
onMounted(() => {
  initBarEcharts();
});
</script>

<template>
  <div ref="barChart" id="barChart" ></div>
</template>

<style scoped>
#barChart{
  background-color: #fff;
  width: 100%;
  height: 90%;
}

</style>